<template>
  <div class="component-tabbar">
    <div class="tab" @click="changeTab('task')">
      <p :class="{'active': currentTab === 'task'}">任务</p>
    </div>
    <div class="tab" @click="changeTab('project')">
      <p :class="{'active': currentTab === 'project'}">项目</p>
    </div>
    <div class="tab" @click="changeTab('module')">
      <p :class="{'active': currentTab === 'module'}">版块</p>
    </div>
    <div class="tab" @click="changeTab('statistics')">
      <p :class="{'active': currentTab === 'statistics'}">统计</p>
    </div>
    <div class="tab" @click="changeTab('trends')">
      <p :class="{'active': currentTab === 'trends'}">动态</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  props: ['currentTab'],
  methods: {
    changeTab(tab) {
      this.$router.push({ name: 'mlivolobim-' + tab})
    }
  } 
}
</script>

<style lang="scss" scoped>
  .component-tabbar{
    position:fixed;
    bottom:0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #FFF;
    box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
    z-index: 99;
    display: flex;
    .tab{
      flex: 1;
      line-height: 46px;
      p{
        margin: 0;
        color: #969696;
        &.active{
          color: #409EFF;
        }
      }
    }
  }
</style>